<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .card-grid {
            display: grid;
            /*? auto-fit将自动调整列的数量以适应容器宽度;minmax(250px,1fr)指最小列宽为250px,可以自动放大至1fr*/
            /*? 此属性将根据容器的宽度自动调整列的数量和宽度，并保证列宽不小于250像素，但可以自动放大以适合剩余的空间。*/
            /*? fr是网格布局单位 表示一份可用空间中的一个单位*/
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 20px;
        }
        .card {
            background-color: #f2f2f2;
            padding: 20px;
            border-radius: 4px;
        }
        .card-image {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }
        .card-title {
            margin-top: 10px;
            font-size: 18px;
            font-weight: bold;
        }

        .card-description {
            margin-top: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="card-grid">
    <div class="card">
        <img src="book1.jpg" alt="Book 1" class="card-image" />
        <h3 class="card-title">Book 1</h3>
        <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="card">
        <img src="book2.jpg" alt="Book 2" class="card-image" />
        <h3 class="card-title">Book 2</h3>
        <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="card">
        <img src="book3.jpg" alt="Book 3" class="card-image" />
        <h3 class="card-title">Book 3</h3>
        <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <!-- Add more cards as needed -->
</div>
</body>
</html>
